<template>
  <div class="box app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'440px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                  常规风格
                </span>
            </div>
            <div style="padding: 20px">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp"
                >
                  {{ activity.content }}
                </el-timeline-item>
                <el-timeline-item
                  timestamp="2021-04-05 20:46"
                >
                  <template #dot>
                    <span class="vab-dot success">
                    <span></span>
                      </span>
                  </template>
                  支持success闪动
                </el-timeline-item>
                <el-timeline-item
                  timestamp="2021-04-05 20:46"
                >
                  <template #dot>
                    <span class="vab-dot error">
                    <span></span>
                      </span>
                  </template>
                  支持error闪动
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding:'0',height:'678px'}">
          <div style="height: 100%;">
            <div class="head-chart">
                <span class="icon-chart">
                  卡片风格
                </span>
            </div>
            <div style="padding: 20px">
              <el-timeline>


                <el-timeline-item timestamp="2018/4/12" placement="bottom"
                                  v-for="(activity, index) in activities"
                                  :key="index"
                                  :icon="activity.icon"
                                  :type="activity.type"
                                  :color="activity.color"
                                  :size="activity.size"
                                  :timestamp="activity.timestamp"
                >
                  <div class="vab-info-card " :class="activity.class">
                    {{ activity.content }}
                  </div>
                </el-timeline-item>
                <el-timeline-item
                  timestamp="2021-04-05 20:46"
                >
                  <template #dot>
                    <span class="vab-dot success">
                    <span></span>
                      </span>
                  </template>
                  <div class="vab-info-card ">
                    支持success闪动
                  </div>
                </el-timeline-item>
                <el-timeline-item
                  timestamp="2021-04-05 20:46"
                >
                  <template #dot>
                    <span class="vab-dot error">
                    <span></span>
                      </span>
                  </template>
                  <div class="vab-info-card ">
                    支持error闪动
                  </div>

                </el-timeline-item>

                <!--                <el-timeline-item timestamp="2018/4/12" placement="bottom">-->
                <!--                 <div class="vab-info-card warn">-->
                <!--                   支持使用小清新图标-->
                <!--                 </div>-->
                <!--                </el-timeline-item>-->
              </el-timeline>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'timeline',
  data() {
    return {
      activities: [
        {
          content: '支持使用小清新图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'info',
          class: 'warn',
          icon: 'ri-account-circle-line'
        },
        {
          content: '支持使用小清新图标',
          timestamp: '2018-04-10 21:46',
          size: 'large',
          type: 'info',
          class: 'error',
          icon: 'ri-archive-line'
        },
        {
          content: '支持自定义颜色',
          class: 'success',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '默认样式的节点',
          class: '',
          timestamp: '2018-04-03 20:46'
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  padding-bottom: 50px;

  .el-col {
    margin-bottom: 20px;

    .el-card {
      margin-bottom: 20px;

      .success {
        background-color: #13ce66 !important;

        &::after {
          border-color: #13ce66 transparent transparent !important;
        }

        span {
          background-color: #13ce66;
        }
      }

      .error {
        background-color: #FF4D4F !important;

        &::after {
          border-color: #FF4D4F transparent transparent !important;
        }

        span {
          background-color: #FF4D4F;
        }
      }

      .vab-dot {
        position: relative;
        display: inline-block;
        left: -1px;
        width: 12px;
        height: 12px;
        margin: auto !important;
        margin-right: 3px;
        vertical-align: middle;

        border-radius: 50%;

        span {
          position: absolute;
          top: 0;
          left: 0;
          box-sizing: border-box;
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          animation: vabDot 1.2s ease-in-out infinite;
        }

        @keyframes vabDot {
          0% {
            transform: scale(0.5);
            opacity: 1;
          }
          25% {
            transform: scale(1);
            opacity: 0.75;
          }
          50% {
            transform: scale(1.5);
            opacity: 0.5;
          }
          75% {
            transform: scale(2);
            opacity: 0.25;
          }
          100% {
            transform: scale(2.5);
            opacity: 0;
          }
        }
      }

      .warn {
        background-color: #ffba00 !important;

        &::after {
          border-color: #ffba00 transparent transparent !important;
        }
      }

      .vab-info-card {
        position: relative;
        width: 80%;
        padding: 20px;
        background: #e2e2e2;
        border-radius: 4.5px;

        &::after {
          position: absolute;
          top: 8px;
          left: -10px;
          width: 0;
          height: 0;
          overflow: hidden;
          content: "";
          border-color: #e2e2e2 transparent transparent;
          border-style: solid dashed dashed;
          border-width: 10px;
        }
      }
    }

    .head-chart {
      display: flex;
      padding: 20px 20px 20px 20px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E4E7ED;

      .icon-chart {
        font-size: 14px;

        i {
          margin-right: 5px;
        }
      }
    }
  }

}
</style>
